import { defineComponent, reactive, Teleport } from "vue";
import styles from "./termPact.module.less";
import LIcon from "@/components/public/lIcon/lIcon";

export default defineComponent({
  setup(props, { expose }) {
    const state = reactive({
      termPactState: "",
      isShow: false,
      termPactTitle: "",
    })
    // 打开弹窗
    const open = (termPactTitle: string, termPactState: string) => {
      state.termPactState = termPactState || "";
      state.termPactTitle = termPactTitle || "";
      state.isShow = true;
    }
    expose({
      open,
    })
    return () => (
      <div class={styles['floating']} v-show={state.isShow}>
        <div class={styles['card']}>
          <div class={styles['card-header']}>
            <span class={styles.title}>{state.termPactTitle}</span>
            <LIcon type="icon-delete-x" class={styles['icon-delete']} onClick={() => { state.isShow = false }} />
          </div>
          <div class={styles['card-container']}>
            <div v-html={state.termPactState}></div>
          </div>
        </div>
      </div>
    )
  }
})